
<template>
  <div class="popupMask">
    <div class="popupPenal" :style="popupPenalStyle">
      <div class="popPenalTitle">
        <div class="popPenalTitleName">
          设置采样要求
        </div>
        <div class="popupClose" v-on:click="close">
          <el-button size="mini">关闭</el-button>
        </div>
      </div>
      <div class="penalContent" :style="penalContentStyle" >
        <div>
          <div class="penalrow selectw100">
            <div class=" width100 ">
                <div class="inlineblock verticalmiddle">
                  采样人
                </div>
                <div class="inlineblock verticalmiddle informationItem">
                    <el-select v-model="caiyangrenDataValue" multiple placeholder="请选择" size="mini">
                        <el-option
                          v-for="item in caiyangrenData"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                    </el-select>
              </div>
            </div>
          </div>
          <div class="penalrow selectw100">
            <div class=" width100 ">
              <div class="inlineblock verticalmiddle">
                现场负责人
              </div>
              <div class="inlineblock verticalmiddle informationItem">
                  <el-select v-model="xianchangrenDataValue" placeholder="请选择" size="mini">
                        <el-option
                          v-for="item in xianchangrenData"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                    </el-select>
              </div>
            </div>
          </div>
          <div class="penalrow selectw100">
            <el-button type="primary" size="mini" @click="addone">增加</el-button>
          </div>
          <div class="penalrow selectw100">
             <el-table
                :data="caiyangData"
                border
                style="width: 100%">
                <el-table-column
                  prop="rongqileixing"
                  label="容器材质"
                  min-width="180">
                  <template slot-scope="scope">
                      <el-select v-model="scope.row.rongqileixing" placeholder="请选择" size="mini">
                        <el-option
                          v-for="item in bottleType"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="rongqileixing"
                  label="容器容量"
                  min-width="180">
                  <template slot-scope="scope">
                      <el-select placeholder="请选择" size="mini">
                        <el-option
                          v-for="item in rongqirongliang"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="pingshu"
                  label="采样瓶数"
                  min-width="180">
                  <template slot-scope="scope">
                      <el-input-number v-model="scope.row.pingshu"  :min="1" :max="10" size="mini"></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  min-width="100">
                  <template slot-scope="scope">
                      <el-button type="text" size="mini" @click="deleteone($index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
          </div>
        </div>
      </div>
      <div class=" penalFooter">
              <el-button class="penalButton" type="primary" size="mini" v-on:click="close">确定</el-button>
              <el-button class="penalButton" size="mini" v-on:click="close">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>

import { mapState } from 'vuex'

export default {
  data () {
    return {
      yesornoValue:'1',
      enableStatusValue:'1',
      caiyangData:[
                  {
                    rongqileixing:'',
                    pingshu:'',
                  }
      ],
      caiyangrenDataValue:[],
      xianchangrenDataValue:'',
      popupPenalStyle:{
        // height:(window.innerHeight - 500)+'px',
        'min-height':'500px',
//      'top': '300px'
      },
      penalContentStyle:{
        'height':(window.innerHeight - 400)+'px'
      },
      rongqirongliang:[
                        {
                          value:'000',
                          label:'200ml'
                        },
                        {
                          value:'001',
                          label:'500ml'
                        },
                        {
                          value:'002',
                          label:'1000ml'
                        },
                        {
                          value:'003',
                          label:'2000ml'
                        }
      ]
    }
  },
  computed:{
    ...mapState(['enableStatus','tableHeightA','yesorno','enableStatus','bottleType','caiyangrenData','xianchangrenData']),
  },
  props:['newOrEdit','canEdit'],
  methods:{
    close(){
      this.$parent.popupShow = false;
    },
    addone(){
      this.caiyangData.push({
                    rongqileixing:'',
                    pingshu:''
      })
    },
    deleteone(index){
      this.caiyangData.splice(index,1);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tabName{
    display: inline-block;
    cursor: pointer;
    padding: 0px 15px;
    border: 1px solid #b7b7b7;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    color: #a9a9a9;
}
.activeTab{
  color: #409eff;
}
.tabPageContent{

}
</style>
